<route lang="yaml">
  meta:
    title: 业主单位
</route>

<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { pa } from 'element-plus/es/locale/index.mjs'
import { computed, reactive, ref } from 'vue'
// 表格数据
const tableData = ref([])
// 分页相关
const currentPage = ref(1)
const selectedType = ref('')
const selectedCustomer = ref('')
const pageSize = 10
const totalNum = ref(0)
const authResult = ref() // 默认为空
function handlePageChange(page) {
  currentPage.value = page
  fetchData()
}
// 对话框
const dialogVisible = ref(false)
// 新增用户对话框
const addUserDialogVisible = ref(false)

// 表单引用，用于校验
const registerFormRef = ref(null)

// 表单数据
const registerForm = reactive({
  customerName: '',
  customerProvince: '',
  customerCity: '',
  customerRegion: '',
  customerAddress: '',
  customerCategory: '',
  customerLicense: '', // 单位证照URL
  customerUserHead: '', // 管理人头像URL
  customerUserName: '',
  customerUserPhone: '',
  customerUserPwd: '',
  customerUserPosition: '',
  customerEmergencyUserName: '',
  customerEmergencyUserPhone: '',
  customerLongitude: 29.123,
  customerLatitude: 103.123,
})

// 需要上传的文件列表（仅用于展示和删除操作）
const licenseFileList = ref([])
const avatarFileList = ref([])

// 表单校验规则
const rules = {
  customerName: [
    { required: true, message: '单位名称为必填项', trigger: 'blur' },
  ],
  location: [
    { required: true, message: '所在地区为必填项', trigger: 'blur' },
  ],
  customerUserName: [
    { required: true, message: '管理人姓名为必填项', trigger: 'blur' },
  ],
  customerUserPhone: [
    { required: true, message: '管理人手机号为必填项', trigger: 'blur' },
  ],
  customerUserPwd: [
    { required: true, message: '密码为必填项', trigger: 'blur' },
  ],
  customerCategory: [
    { required: true, message: '单位类别为必填项', trigger: 'blur' },
  ],
}

// 文件选择前钩子，可做大小/格式校验，这里仅做示例
function beforeUploadFile(file) {
  // 比如限制图片大小不超过 2MB
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!')
  }
  return isLt2M
}

// 当选择文件时触发，执行手动上传
function handleChangeFile(type) {
  return async (file, fileList) => {
    if (!file.raw) return
    try {
      // 准备 formData
      const formData = new FormData()
      formData.append('file', file.raw)

      // 调用接口上传
      const response = await axios.post(
        'https://www.cqwuyang.cn/ElectricManageService/upload/uploadFileToCustomer',
        formData,
        { headers: { 'Content-Type': 'multipart/form-data' } },
      )
      // 假设后端返回的图片访问地址在 response.data.data 中
      const imageUrl = response.data.data
      console.log('imageUrl,', imageUrl)

      // 将图片地址赋值到对应字段
      if (type === 'license') {
        registerForm.customerLicense = imageUrl
        licenseFileList.value = [
          {
            name: file.name,
            url: imageUrl,
          },
        ]
      }
      else if (type === 'managerAvatar') {
        registerForm.customerUserHead = imageUrl
        avatarFileList.value = [
          {
            name: file.name,
            url: imageUrl
          }
        ]
      }
      ElMessage.success('上传成功！')
    } catch (error) {
      ElMessage.error('上传失败，请重试')
    }
  }
}

// 删除文件
function handleRemoveFile(type) {
  return (file, fileList) => {
    if (type === 'license') {
      registerForm.customerLicense = ''
      licenseFileList.value = []
    } else if (type === 'managerAvatar') {
      registerForm.customerUserHead = ''
      avatarFileList.value = []
    }
  }
}

// 点击“注册”按钮
function handleRegister() {
  registerFormRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.warning('请填写必填项后再提交')
      return
    }
    try {
      // 准备请求数据
      const requestData = { ...registerForm };

      // 发送注册请求
      const response = await axios.post(
        'https://www.cqwuyang.cn/ElectricManageService/customer/register',
        requestData,
      )

      // 处理响应
      if (response.data.code === 200) { // 假设成功状态码为200
        ElMessage.success('注册成功')
        addUserDialogVisible.value = false
        console.log('注册成功,', response.data)
        // 可以在这里重置表单或跳转页面
      } else {
        ElMessage.error(response.data.mesage || '注册失败')
        console.log('注册失败,', response.data.mesage)
      }
    } catch (error) {
      console.error('注册请求失败:', error)
      ElMessage.error('注册请求失败，请稍后重试')
    }
  })
}
const dialogData = reactive({
  customerCode: '',
  customerCategory: '',
  customerAddress: '',
  customerCity: '',
  customerEmergencyUserName: '',
  customerEmergencyUserPhone: '',
  customerId: 0,
  customerLatitude: '',
  customerLicense: '',
  customerLoginState: '',
  customerLongitude: '',
  customerName: '',
  customerProvince: '',
  customerRegion: '',
  customerSaleContractFile: '',
  customerSaleName: '',
  customerSalePhone: '',
  customerSaleState: 0,
  customerState: 2,
  customerTaxpayerAddress: '',
  customerTaxpayerBankCode: '',
  customerTaxpayerBankName: '',
  customerTaxpayerNumber: '',
  customerTaxpayerPhone: '',
  customerUnitid: '',
  customerUserHead: '',
  customerUserName: '',
  customerUserPhone: '',
  customerUserPosition: '',
  customerUserPwd: '',
})
// 放大图片
const isModalOpen = ref(false)
const currentImage = ref('')
function openImage(url) {
  currentImage.value = url
  isModalOpen.value = true
}
function closeModal() {
  isModalOpen.value = false
  currentImage.value = ''
}
// 展示业主详情对话框
function showUnitDetail(row) {
  console.log('业主详情', row)
  Object.keys(dialogData).forEach((key) => {
    dialogData[key] = row[key] !== undefined ? row[key] : ''
  })
  console.log('dialogData', dialogData)
  dialogVisible.value = true
  console.log(dialogVisible.value)
}
const isDialogVisible = ref(false)
// 销售状态选项
const saleStatusOptions = [
  { label: '无', value: 0 },
  { label: '刚接触', value: 1 },
  { label: '已洽谈', value: 2 },
  { label: '准备签合同', value: 3 },
  { label: '合同已签订', value: 4 },
]
// 认证状态选项
const authStatusOptions = [
  { label: '审核中', value: 1 },
  { label: '通过', value: 2 },
  { label: '不通过', value: 3 },
]

// 上传成功处理函数
function handleUploadSuccess(response, file, fileList) {
  console.log('上传成功：', response, file, fileList)
}

// 上传失败处理函数
function handleUploadError(error, file) {
  console.error('上传失败：', error, file)
}
const typeOptions = [
  { value: '', label: '全部' },
  { value: 1, label: '机关' },
  { value: 2, label: '事业' },
  { value: 3, label: '国有' },
  { value: 4, label: '民营' },
]

const customerCode = ref('')
const hikUnitId = ref('')
function handle(row) {
  console.log('打开对话框', row.customerCode)
  customerCode.value = row.customerCode
  authResult.value = row.customerState
  isDialogVisible.value = true // 打开对话框
}
function openAddUserDialog() {
  addUserDialogVisible.value = true
  console.log('addUserDialogVisible:', addUserDialogVisible)
}
async function bindHik() {
  const params = {
    customerCode: customerCode.value,
    hikUnitId: hikUnitId.value,
    customerState: authResult.value,
  }
  if (authResult.value === 2 && hikUnitId.value === '') {
    ElMessage({
      message: `海康id不能为空`,
      type: 'success',
    })
    return
  }
  console.log('绑定参数', params)
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/customer/stateUp', params)
    if (response.data) {
      console.log('绑定结果', response.data)
      isDialogVisible.value = false
      window.location.reload()
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}
async function submitCustomer() {
  const params = {
    customerCode: dialogData.customerCode,
    customerSaleName: dialogData.customerSaleName,
    customerSalePhone: dialogData.customerSalePhone,
    customerSaleState: dialogData.customerSaleState,
    customerSaleContractFile: dialogData.customerSaleContractFile,
    customerTaxpayerNumber: dialogData.customerTaxpayerNumber,
    customerTaxpayerAddress: dialogData.customerTaxpayerAddress,
    customerTaxpayerPhone: dialogData.customerTaxpayerPhone,
    customerTaxpayerBankName: dialogData.customerTaxpayerBankName,
    customerTaxpayerBankCode: dialogData.customerTaxpayerBankCode,
  }
  console.log('修改参数', params)
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/customer/operateInfoUp', params)
    if (response.data) {
      console.log('修改客户业务运营信息结果', response.data)
      dialogVisible.value = false
      window.location.reload()
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}
// 合同文件列表
const contractFileList = ref([])

// 上传逻辑
async function customUpload(params) {
  const formData = new FormData()
  formData.append('file', params.file)
  console.log('上传文件', formData)

  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/upload/uploadFileToCustomer', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    })

    if (response.data && response.data.data) {
      console.log('上传成功，返回的 URL：', response.data.data)
      dialogData.customerSaleContractFile = response.data.data // 存储文件 URL
    }
    else {
      console.error('上传成功但未返回 URL：', response.data)
    }
  }
  catch (error) {
    console.error('上传失败：', error)
  }
}

// 下载合同
function downloadContract() {
  if (dialogData.customerSaleContractFile) {
    const link = document.createElement('a')
    link.href = dialogData.customerSaleContractFile
    link.download = '合同文件'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
  else {
    console.warn('合同文件URL为空')
  }
}
async function fetchData(customerRegion = null, customerCategory = null, customerName = null, pageNum = '1') {
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/customer/findAllByCondition', {
      customerRegion,
      customerCategory: selectedType.value,
      customerName: selectedCustomer.value,
      pageNum: currentPage.value,
      customerState: -1,
      pageSize,
    })

    // 如果获取到数据，更新 dialogData
    if (response.data) {
      tableData.value = response.data.data.rows
      totalNum.value = response.data.data.total
      console.log('tableData')
      console.log(tableData.value)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}

async function addUser(customerRegion = null, customerCategory = null, customerName = null, pageNum = '1') {
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/customer/findAllByCondition', {
      customerRegion,
      customerCategory: selectedType.value,
      customerName: selectedCustomer.value,
      pageNum: currentPage.value,
      customerState: -1,
      pageSize,
    })

    // 如果获取到数据，更新 dialogData
    if (response.data) {
      tableData.value = response.data.data.rows
      totalNum.value = response.data.data.total
      console.log('tableData')
      console.log(tableData.value)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}
onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="dashboard">
    <div class="header">
      业主单位
    </div>
    <!-- 筛选区域 -->
    <el-row :gutter="20" class="filter-row">
      <el-col :span="4">
        <el-select v-model="selectedType" placeholder="请选择业主单位类型" clearable>
          <el-option v-for="type in typeOptions" :key="type.value" :label="type.label" :value="type.value" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input v-model="selectedCustomer" style="width: 240px;" placeholder="请输入单位名称" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" class="search-button" @click="fetchData()">
          搜索
        </el-button>
        <el-button type="primary" class="search-button" @click="openAddUserDialog">
          新增用户
        </el-button>
      </el-col>
    </el-row>
    <!-- 数据表格 @row-click="showUnitDetail" -->
    <el-table :data="tableData" border class="table" style="width: 100%; cursor: pointer;" @row-click="showUnitDetail">
      <el-table-column prop="customerCode" label="单位编号" align="center" />
      <el-table-column prop="customerName" label="单位名称" align="center" />
      <el-table-column prop="customerUserName" label="单位管理人" align="center" />
      <el-table-column prop="customerUserPhone" label="单位管理人手机号" align="center" />
      <el-table-column prop="customerUserPosition" label="单位管理职务" align="center" />
      <el-table-column prop="customerRegion" label="单位区域" align="center" />
      <el-table-column prop="customerAddress" label="单位地址" align="center">
        <template #default="{ row }">
          <div class="multi-line-ellipsis">
            {{ row.customerAddress }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="actions" width="200px" label="操作" align="center">
        <template #default="{ row }">
          <el-button type="text" size="small" class="action-button" @click.stop="handle(row)">
            用户认证
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog v-model="isDialogVisible" title="用户认证" @open="resetSelection">
      <!-- 对话框内容 -->
      <p><strong>请选择认证结果：</strong></p>
      <el-select v-model="authResult" placeholder="请选择" style="width: 400px; margin-bottom: 20px;">
        <el-option v-for="option in authStatusOptions" :key="option.value" :label="option.label"
          :value="option.value" />
      </el-select>

      <!-- 输入框，仅在“通过”时显示 -->
      <p v-if="authResult === 2">
        <strong>请输入海康编号：</strong>
      </p><el-input v-if="authResult === 2" v-model="hikUnitId" style="width: 600px;" placeholder="请填写" clearable />

      <template #footer>
        <el-button @click="isDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="bindHik()">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" width="600px" title="业主单位详情">
      <div>
        <h3>单位信息：</h3>
        <p><strong>单位编号：</strong> {{ dialogData.customerCode }}</p>
        <p><strong>单位类型：</strong> {{ dialogData.customerCategory || '暂无数据' }}</p>
        <p><strong>单位名称：</strong> {{ dialogData.customerName || '暂无数据' }}</p>
        <!-- 单位营业执照 -->
        <!-- 图片 -->
        <h3>单位营业执照：</h3>
        <div v-if="dialogData.customerLicense">
          <div class="image-container">
            <el-image v-if="dialogData.customerLicense !== undefined" :src="dialogData.customerLicense"
              class="image-thumbnail" @click="openImage(dialogData.customerLicense)" @error="handleImageError" />
          </div>
        </div>
        <p v-else>
          暂无图片
        </p>
        <p><strong>单位区域：</strong> {{ dialogData.customerRegion }}</p>
        <p><strong>单位详细地址：</strong> {{ dialogData.customerAddress || '暂无数据' }}</p>
        <h3>管理人头像：</h3>
        <div v-if="dialogData.customerUserHead">
          <div class="image-container">
            <el-image :src="dialogData.customerUserHead" class="image-thumbnail"
              @click="openImage(dialogData.customerUserHead)" />
          </div>
        </div>
        <p v-else>
          暂无图片
        </p>
        <p><strong>管理人：</strong> {{ dialogData.customerUserName }}</p>
        <p><strong>管理人手机号：</strong> {{ dialogData.customerUserPhone || '暂无数据' }}</p>
        <p><strong>管理人职务：</strong> {{ dialogData.customerUserPosition || '暂无数据' }}</p>
        <!-- 业务运营信息 -->
        <h3>业务运营信息</h3>
        <p><strong>姓名：</strong> <el-input v-model="dialogData.customerSaleName" style="width: 240px;" /></p>
        <p><strong>电话：</strong><el-input v-model="dialogData.customerSalePhone" style="width: 240px;" /></p>
        <p>
          <strong>销售状态：</strong>
          <el-select v-model="dialogData.customerSaleState" placeholder="请选择销售状态" style="width: 240px;">
            <el-option v-for="option in saleStatusOptions" :key="option.value" :label="option.label"
              :value="option.value" />
          </el-select>
        </p>
        <p>
          <strong>上传合同：</strong>
        </p>
        <div style="display: flex; gap: 10px;">
          <el-button v-if="dialogData.customerSaleContractFile" size="small" type="primary" @click="downloadContract">
            下载合同
          </el-button>
          <el-upload :http-request="customUpload" :limit="1" :file-list="contractFileList" :auto-upload="true">
            <el-button size="small" type="primary">
              上传合同
            </el-button>
          </el-upload>
        </div>
        <!-- </p> -->
        <p><strong>纳税人识别号：</strong><el-input v-model="dialogData.customerTaxpayerNumber" style="width: 240px;" /></p>
        <p><strong>地址：</strong><el-input v-model="dialogData.customerTaxpayerAddress" style="width: 240px;" /></p>
        <p><strong>电话：</strong> <el-input v-model="dialogData.customerTaxpayerPhone" style="width: 240px;" /></p>
        <p><strong>开户行名称</strong> <el-input v-model="dialogData.customerTaxpayerBankName" style="width: 240px;" /></p>
        <p><strong>账号</strong><el-input v-model="dialogData.customerTaxpayerBankCode" style="width: 240px;" /></p>
        <!-- 放大显示的模态框 -->
        <div v-if="isModalOpen" class="modal" @click="closeModal">
          <img :src="currentImage" class="modal-image">
        </div>

        <div class="dialog-footer">
          <el-button @click="submitCustomer">
            提交
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 新增用户 -->
    <el-dialog v-model="addUserDialogVisible" title="注册" width="600px" destroy-on-close>
      <!-- 表单区域 -->
      <el-form ref="registerFormRef" :model="registerForm" :rules="rules" label-width="120px" size="small">
        <!-- 单位名称 -->
        <el-form-item label="单位名称" prop="customerName">
          <el-input v-model="registerForm.customerName" placeholder="请输入单位名称" />
        </el-form-item>

        <!-- 所在地区 -->
        <el-form-item label="所在地区">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input v-model="registerForm.customerProvince" placeholder="请输入省份" />
            </el-col>
            <el-col :span="8">
              <el-input v-model="registerForm.customerCity" placeholder="请输入城市" />
            </el-col>
            <el-col :span="8">
              <el-input v-model="registerForm.customerRegion" placeholder="请输入区县" />
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 详细地址 -->
        <el-form-item label="详细地址">
          <el-input v-model="registerForm.customerAddress" placeholder="请输入详细地址" />
        </el-form-item>

        <!-- 单位类别 -->
        <el-form-item label="单位类别">
          <el-select v-model="registerForm.customerCategory" placeholder="请选择单位类别">
            <el-option label="机关" value="1" />
            <el-option label="事业" value="2" />
            <el-option label="国有" value="3" />
            <el-option label="民营" value="4" />
          </el-select>
        </el-form-item>

        <!-- 单位证照上传（只允许上传一张） -->
        <el-form-item label="单位证照">
          <el-upload class="upload-demo" :limit="1" :on-remove="handleRemoveFile('license')"
            :on-change="handleChangeFile('license')" :file-list="licenseFileList" :auto-upload="false"
            list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- <el-image v-if="registerForm.customerLicense" :src="registerForm.customerLicense"
            style="width: 100px; height: 100px; margin-top: 10px;" fit="cover"></el-image> -->
        </el-form-item>

        <!-- 管理人头像上传（只允许上传一张） -->
        <el-form-item label="管理人头像">
          <el-upload class="upload-demo" action="" :limit="1" :on-remove="handleRemoveFile('managerAvatar')"
            :before-upload="beforeUploadFile" :on-change="handleChangeFile('managerAvatar')" :file-list="avatarFileList" :auto-upload="false"
            list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- <el-image v-if="registerForm.customerUserHead" :src="registerForm.customerUserHead"
            style="width: 100px; height: 100px; margin-top: 10px;" fit="cover"></el-image> -->
        </el-form-item>

        <!-- 管理人姓名 -->
        <el-form-item label="管理人姓名" prop="customerUserName">
          <el-input v-model="registerForm.customerUserName" placeholder="请输入管理人姓名" />
        </el-form-item>

        <!-- 管理人手机号 -->
        <el-form-item label="管理人手机号" prop="customerUserPhone">
          <el-input v-model="registerForm.customerUserPhone" placeholder="请输入管理人手机号" />
        </el-form-item>

        <!-- 管理人密码 -->
        <el-form-item label="管理人密码">
          <el-input v-model="registerForm.customerUserPwd" placeholder="请输入管理人密码" />
        </el-form-item>

        <!-- 管理人职务 -->
        <el-form-item label="管理人职务">
          <el-input v-model="registerForm.customerUserPosition" placeholder="请输入管理人职务" />
        </el-form-item>

        <!-- 紧急联系人 -->
        <el-form-item label="紧急联系人">
          <el-input v-model="registerForm.customerEmergencyUserName" placeholder="请输入紧急联系人" />
        </el-form-item>

        <!-- 紧急联系人手机号 -->
        <el-form-item label="紧急联系人手机号">
          <el-input v-model="registerForm.customerEmergencyUserPhone" placeholder="请输入紧急联系人手机号" />
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRegister">注 册</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <div class="pagination-wrapper">
      <div class="pagination">
        <el-pagination size="normal" background layout="prev, pager, next" :total="totalNum" class="mt-4"
          :default-page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.el-cascader,
.el-input {
  width: 100%;
}

:deep(.el-form-item__label)::before {
  content: "" !important;
}

.dashboard {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: center;
  width: 30%;
  padding: 10px 20px;
  margin-bottom: 20px;

  /* 将分页按钮居中 */
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.filter-row {
  margin-bottom: 20px;
}

.search-button {
  color: white;
  background: linear-gradient(45deg, #3b82f6, #06b6d4);
  border: none;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}

.search-button:hover {
  background: linear-gradient(45deg, #06b6d4, #3b82f6);
}

.table {
  margin-top: 20px;
  overflow: hidden;
  border-radius: 8px;
}

.el-table {
  --el-table-row-hover-bg-color: rgb(14 95 255 / 50%);
}

.table>>>.el-table__header-wrapper th {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background-color: #f3f4f6;
  border-bottom: 2px solid #e5e7eb;
}

/* 地址部分，超过则显示省略号 */
.multi-line-ellipsis {
  display: -webkit-box;
  max-height: 3em;
  overflow: hidden;
  line-height: 1.5em;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  white-space: normal;
  -webkit-box-orient: vertical;
}

.action-button {
  padding: 4px 8px;
  font-weight: bold;
  color: #3b82f6;
  background-color: antiquewhite;
  border-radius: 5px;
  transition: all 0.2s;
}

.action-button:hover {
  background-color: #5382df;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.pagination {
  bottom: 20px;
  display: flex;

  /* 将分页按钮居中 */
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  margin-top: 20px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 -2px 10px rgb(0 0 0 / 5%);
}

.pagination-wrapper {
  position: fixed;
  bottom: 20px;
  left: 280px;
  z-index: 10;
  align-items: center;
  width: 80%;
  padding: 10px 0;
}

/* 图片 */
.image-container {
  display: flex;

  /* 使用 flexbox 布局 */
  overflow-x: auto;

  /* 允许横向滚动 */
}

.image-thumbnail {
  width: 300px;

  /* 设定缩略图宽度 */
  height: 100px;

  /* 保持图片的纵横比并填满容器 */
  margin-right: 10px;

  /* 图片之间的间距 */
  cursor: pointer;

  /* 设定缩略图高度 */
  object-fit: cover;

  /* 鼠标悬停时显示为可点击 */
}

.modal {
  position: fixed;

  /* 固定定位 */
  inset: 0;

  /* 半透明黑色背景 */
  display: flex;
  align-items: center;

  /* 使用 flexbox 居中对齐 */
  justify-content: center;
  background: rgb(0 0 0 / 80%);
}

.modal-image {
  max-width: 90%;

  /* 最大宽度 */
  max-height: 90%;

  /* 最大高度 */
}
</style>
